<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:sdu="http://sduept.com/jsf/cc">
<h:head>
	<link rel="stylesheet"
		href="#{request.contextPath}/resources/bootstrap/css/bootstrap.min.css" />
	<!-- Font Awesome -->
	<link rel="stylesheet"
		href="#{request.contextPath}/resources/font-awesome/css/font-awesome.min.css" />
	<title>角色授权</title>
</h:head>
<h:body style="margin-top:20px">
	<h:form id="form">
		<p:growl id="msgs" showDetail="true" />
		<p:layout fullPage="true">
			<p:layoutUnit position="north">
				<p:toolbar id="btnBar">
					<f:facet name="left">
						<p:commandButton value="保存" id="newBtn" icon="ui-icon-document"
							style="margin-left: 3px;"
							actionListener="#{grantRoleController.save()}" />
					</f:facet>
				</p:toolbar>
			</p:layoutUnit>
			<p:layoutUnit header="角色列表" position="west" size="20%">
				<p:dataTable id="role" var="role" emptyMessage="无数据"
					value="#{grantRoleController.roles}"
					selection="#{grantRoleController.selectedRoles}"
					rowKey="#{role.id}">
					<p:ajax event="rowSelect" update="form:treeTable form:mergeTable"
						listener="#{grantRoleController.rowSelect}" />
					<p:ajax event="rowUnselect" update="form:treeTable form:mergeTable"
						listener="#{grantRoleController.rowUnSelect}" />
					<p:ajax event="rowSelectCheckbox"
						update="form:treeTable form:mergeTable"
						listener="#{grantRoleController.selectedCheckBox}" />
					<p:ajax event="rowUnselectCheckbox"
						update="form:treeTable form:mergeTable"
						listener="#{grantRoleController.unSelectedCheckBox}" />
					<p:column selectionMode="multiple"
						style="width:30px;text-align:center" />
					<p:column headerText="名称">
						<h:outputText value="#{role.name}" />
					</p:column>
					<p:column headerText="查看权限" style="text-align:center;width:100px" >
						<p:commandButton icon="fa fa-search" style="width:25px"
							actionListener="#{grantRoleController.watchSinglePermission(role)}"
							update="form:treeTable">
						</p:commandButton>
					</p:column>
				</p:dataTable>
			</p:layoutUnit>

			<p:layoutUnit header="角色共有权限(拒绝优先)" position="center" size="40%">
				<p:treeTable id="mergeTable" widgetVar="mergeTable"
					emptyMessage="无数据" value="#{grantRoleController.mergeRoot}"
					var="fun">
					<p:column headerText="名称">
						<h:outputText value="#{fun.function.name } " />
					</p:column>
					
					<p:column headerText="权限" style="text-align:center; width:70px">
						<h:outputText rendered="#{fun.permission=='DENY'}"
							style="color:red" value="拒绝" />
						<h:outputText rendered="#{fun.permission=='ALLOW'}"
							style="color:green" value="允许" />
					</p:column>
					
					<p:column headerText="类型" style="text-align:center; width:140px">
						<h:outputText 
							value="页面"
							styleClass="fa fa-home"
							rendered="#{fun.function.type.equals('page')}"
							style="color:#433" />
						<h:outputText
							value=" 页内菜单"
							styleClass="fa fa-dot-circle-o"
							rendered="#{fun.function.type.equals('pagemenu')}"
							style="color:#CD2990" />
						<h:outputText
							value=" 菜单"
							styleClass="fa fa-bars"
							rendered="#{fun.function.type.equals('menu')}"
							style="color:#006400" />
						<h:outputText
							value=" 操作"
							styleClass="fa fa-wrench"
							rendered="#{fun.function.type.equals('operation')}"
							style="color:blue" />
					</p:column>
				</p:treeTable>
			</p:layoutUnit>

			<p:layoutUnit header="角色本身权限" position="east" size="40%">
				<p:treeTable id="treeTable" widgetVar="treeTable" emptyMessage="无数据"
					value="#{grantRoleController.singleRoot}" var="fun">
					<p:column headerText="名称">
						<h:outputText value="#{fun.function.name } " />
					</p:column>
					
					<p:column headerText="权限" style="text-align:center;width:70px">
						<h:outputText rendered="#{fun.permission=='DENY'}"
							style="color:red" value="拒绝" />
						<h:outputText rendered="#{fun.permission=='ALLOW'}"
							style="color:green" value="允许" />
					</p:column>
					
					<p:column headerText="类型" style="text-align:center;width:140px">
						<h:outputText 
							value="页面"
							styleClass="fa fa-home"
							rendered="#{fun.function.type.equals('page')}"
							style="color:#433" />
						<h:outputText
							value=" 页内菜单"
							styleClass="fa fa-dot-circle-o"
							rendered="#{fun.function.type.equals('pagemenu')}"
							style="color:#CD2990" />
						<h:outputText
							value=" 菜单"
							styleClass="fa fa-bars"
							rendered="#{fun.function.type.equals('menu')}"
							style="color:#006400" />
						<h:outputText
							value=" 操作"
							styleClass="fa fa-wrench"
							rendered="#{fun.function.type.equals('operation')}"
							style="color:blue" />
					</p:column>
				</p:treeTable>
			</p:layoutUnit>
		</p:layout>

	</h:form>
</h:body>
</html>
